<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/7/15
  Time: 下午3:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小猫搬箱子</title>
    <style>
        .game-container {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }

        .cat {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: orange;
            top: 50px;
            left: 50px;
        }

        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: brown;
            top: 100px;
            left: 100px;
        }

        .target {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: green;
            top: 200px;
            left: 200px;
        }
    </style>
</head>

<body>
<div class="game-container">
    <div class="cat"></div>
    <div class="box"></div>
    <div class="target"></div>
</div>
<script>
    const cat = document.querySelector('.cat');
    const box = document.querySelector('.box');
    const target = document.querySelector('.target');

    let catTop = 50;
    let catLeft = 50;
    // 新增箱子的初始位置变量
    let boxTop = 100;
    let boxLeft = 100;

    document.addEventListener('keydown', function (e) {
        if (e.key === 'ArrowUp') {
            catTop -= 10;
        } else if (e.key === 'ArrowDown') {
            catTop += 10;
        } else if (e.key === 'ArrowLeft') {
            catLeft -= 10;
        } else if (e.key === 'ArrowRight') {
            catLeft += 10;
        }
        cat.style.top = catTop + 'px';
        cat.style.left = catLeft + 'px';

        // 简单的碰撞检测和箱子移动逻辑
        const catRect = cat.getBoundingClientRect();
        const boxRect = box.getBoundingClientRect();

        if (
            catRect.right > boxRect.left &&
            catRect.left < boxRect.right &&
            catRect.bottom > boxRect.top &&
            catRect.top < boxRect.bottom
        ) {
            if (e.key === 'ArrowUp') {
                boxTop -= 10;
            } else if (e.key === 'ArrowDown') {
                boxTop += 10;
            } else if (e.key === 'ArrowLeft') {
                boxLeft -= 10;
            } else if (e.key === 'ArrowRight') {
                boxLeft += 10;
            }
            box.style.top = boxTop + 'px';
            box.style.left = boxLeft + 'px';
        }

        // 判断箱子是否到达目标位置
        const boxElementRect = box.getBoundingClientRect();
        const targetElementRect = target.getBoundingClientRect();

        if (
            boxElementRect.right > targetElementRect.left &&
            boxElementRect.left < targetElementRect.right &&
            boxElementRect.bottom > targetElementRect.top &&
            boxElementRect.top < targetElementRect.bottom
        ) {
            alert('恭喜你，小猫成功把箱子搬到了目标位置！');
        }
    });
</script>
</body>

</html>
